<template>
  <div class="_caigou_admin">
    <div class="_top">
      <span>采购订单管理</span>
      <el-button color="#6265f6">新增采购单</el-button>
    </div>
    <div class="_tool">
      <el-input
        style="width: 270px; height: 30px"
        placeholder="采购单号/供应商/负责人"
      >
        <template #append>
          <el-button :icon="Search" />
        </template>
      </el-input>
      <div class="_classification">
        <span>显示: &nbsp;&nbsp;</span>
        <el-radio-group v-model="defaultSelection" size="small">
          <el-radio-button
            v-for="item in ListState"
            :key="item.name"
            :value="item.name"
            :label="item.name"
          >
            {{ item.name }}
          </el-radio-button>
        </el-radio-group>
      </div>
    </div>
    <div class="_table">
      <el-table
        :data="procurementList"
        ref="purchaseOrderForm"
        @selection-change="tableChange"
      >
        <el-table-column
          type="selection"
          width="55"
          :selectable="canYouChoose"
        />
        <el-table-column type="index" width="55" />
        <el-table-column prop="oddNumbers" label="采购单号">
          <template #default="scope">
            <span
              @click="showDialog(scope.row)"
              style="color: #6265f6; cursor: pointer"
              >{{ scope.row.oddNumbers }}</span
            >
          </template>
        </el-table-column>
        <el-table-column prop="amountOfMoney" label="采购金额 (元)" />
        <el-table-column prop="date" label="采购日期" />
        <el-table-column prop="supplier" label="供应商" />
        <el-table-column prop="state" label="状态" />
        <el-table-column prop="personInCharge" label="采购负责人" />
        <el-table-column prop="telephone" label="负责人电话" />
        <el-table-column prop="remarks" label="备注" />
        <el-table-column prop="creator" label="创建人" />
        <el-table-column prop="creationTime" label="创建时间" />
      </el-table>

      <el-pagination
        background
        :total="550"
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        size="small"
        :disabled="disabled"
        layout="prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>

  <el-dialog
    v-model="orderDetailsPage"
    :before-close="handleClose"
    fullscreen
    destroy-on-close
    class="caigou_dialog"
  >
    <div class="_box1">
      <el-descriptions
        :title="dislogValue.oddNumbers"
        :column="3"
        size="small"
        border
      >
        <template #extra>
          <!-- <el-button type="primary">Operation</el-button> -->
        </template>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">采购金额 (元)</div>
          </template>
          {{ dislogValue.amountOfMoney }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">采购日期</div>
          </template>
          {{ dislogValue.date }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">供应商</div>
          </template>
          {{ dislogValue.supplier }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">采购负责人</div>
          </template>
          <el-tag size="small">{{ dislogValue.personInCharge }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">负责人电话</div>
          </template>
          {{ dislogValue.telephone }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">状态</div>
          </template>
          {{ dislogValue.state }}
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="orderDetailsPage = false">Cancel</el-button>
        <el-button type="primary" @click="orderDetailsPage = false">
          Confirm
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { ElTable } from "element-plus";
import { Search } from "@element-plus/icons-vue";
const currentPage = ref(7);
const pageSize = ref(13);
const disabled = ref(false);
const orderDetailsPage = ref(false);
const dislogValue = ref<singleData | any>(Object);

interface singleData {
  oddNumbers: "";
  amountOfMoney: "";
  date: "";
  supplier: "";
  state: "";
  personInCharge: "";
  telephone: "";
  remarks: "";
  creator: "";
  creationTime: "";
  selectable: boolean;
}
function handleClose() {
  orderDetailsPage.value = false;
  console.log("关闭了");
}
function showDialog(params: singleData) {
  orderDetailsPage.value = true;
  dislogValue.value = params;
}

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`);
};

const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
};

const ListState = ref([
  { name: "全部" },
  { name: "待提交" },
  { name: "审核中" },
  { name: "审核完成" },
  { name: "审核拒绝" },
]);
const procurementList = ref([
  {
    oddNumbers: "ASQEWQWE",
    amountOfMoney: "998.00",
    date: "2024-02-13",
    supplier: "供应商一",
    state: "待提交",
    personInCharge: "张三",
    telephone: "1239071209478",
    remarks: "---",
    creator: "真不错",
    creationTime: "2024-02-11",
    selectable: true,
  },
  {
    oddNumbers: "ASQEWQWE",
    amountOfMoney: "998.00",
    date: "2024-02-13",
    supplier: "供应商一",
    state: "待提交",
    personInCharge: "张三",
    telephone: "1239071209478",
    remarks: "---",
    creator: "真不错",
    creationTime: "2024-02-11",
    selectable: false,
  },
  {
    oddNumbers: "ASQEWQWE",
    amountOfMoney: "998.00",
    date: "2024-02-13",
    supplier: "供应商一",
    state: "待提交",
    personInCharge: "张三",
    telephone: "1239071209478",
    remarks: "---",
    creator: "真不错",
    creationTime: "2024-02-11",
    selectable: true,
  },
  {
    oddNumbers: "ASQEWQWE",
    amountOfMoney: "998.00",
    date: "2024-02-13",
    supplier: "供应商一",
    state: "待提交",
    personInCharge: "张三",
    telephone: "1239071209478",
    remarks: "---",
    creator: "真不错",
    creationTime: "2024-02-11",
    selectable: false,
  },
  {
    oddNumbers: "ASQEWQWE",
    amountOfMoney: "998.00",
    date: "2024-02-13",
    supplier: "供应商一",
    state: "待提交",
    personInCharge: "张三",
    telephone: "1239071209478",
    remarks: "---",
    creator: "真不错",
    creationTime: "2024-02-11",
    selectable: true,
  },
]);
const defaultSelection = ref("待提交");
const purchaseOrderForm = ref<InstanceType<typeof ElTable>>();
function tableChange(val: []) {
  console.log(val);
}
function canYouChoose(row: { selectable: boolean }) {
  return row.selectable;
}
</script>
<style lang="less" scoped>
._caigou_admin {
  display: flex;
  flex-direction: column;
  position: relative;
  width: calc(100%);
  height: calc(100%);
}
._top {
  display: flex;
  justify-content: space-between;
}
.el-pagination {
  position: absolute;
  bottom: 0;
  right: 0;
  height: 50px;
}
._tool {
  display: flex;
  flex-direction: row;
  align-items: center;
  ._classification {
    margin-left: 30px;
    display: flex;
    align-items: center;
  }
}
._table {
  width: 100%;
  margin-top: 20px;
  height: calc(80%);
  .el-table {
    width: 100%;
    height: 100%;
    border: 1px solid #ccc;
    box-sizing: border-box;
  }
}
</style>
